<template>
	<view class="favorites-container">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<text class="iconfont icon-arrow-left"></text>
			</view>
			<view class="nav-title">我的收藏</view>
			<view class="nav-right" @click="toggleEditMode">
				<text class="edit-text">{{ isEditMode ? '完成' : '编辑' }}</text>
			</view>
		</view>
		
		<!-- 分类标签 -->
		<view class="category-tabs">
			<view 
				v-for="(tab, index) in tabs" 
				:key="index"
				class="tab-item" 
				:class="{ active: currentTab === index }"
				@click="changeTab(index)"
			>
				{{ tab.name }}
				<text v-if="tab.count > 0" class="tab-count">({{ tab.count }})</text>
			</view>
		</view>
		
		<!-- 收藏列表 -->
		<scroll-view 
			scroll-y 
			class="favorites-list"
			@scrolltolower="loadMore"
			refresher-enabled
			@refresherrefresh="onRefresh"
			:refresher-triggered="refreshing"
		>
			<!-- 商品收藏 -->
			<view v-if="currentTab === 0" class="goods-list">
				<view 
					v-for="item in goodsList" 
					:key="item.id"
					class="goods-item"
					@click="goToGoodsDetail(item)"
				>
					<!-- 编辑模式选择框 -->
					<view v-if="isEditMode" class="item-checkbox" @click.stop="toggleSelect(item.id)">
						<text class="iconfont" :class="selectedItems.includes(item.id) ? 'icon-check-circle-fill' : 'icon-circle'"></text>
					</view>
					
					<image :src="item.image" class="goods-image" mode="aspectFill" />
					
					<view class="goods-info">
						<view class="goods-title">{{ item.title }}</view>
						<view class="goods-desc">{{ item.description }}</view>
						<view class="goods-price">
							<text class="price-symbol">¥</text>
							<text class="price-value">{{ item.price }}</text>
							<text v-if="item.originalPrice" class="original-price">¥{{ item.originalPrice }}</text>
						</view>
						<view class="goods-meta">
							<text class="collect-time">{{ formatTime(item.collectTime) }}</text>
							<view class="goods-actions">
								<view class="action-btn" @click.stop="addToCart(item)">
									<text class="iconfont icon-cart"></text>
								</view>
								<view class="action-btn" @click.stop="removeFavorite(item.id)">
									<text class="iconfont icon-heart-fill"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 店铺收藏 -->
			<view v-if="currentTab === 1" class="shop-list">
				<view 
					v-for="item in shopList" 
					:key="item.id"
					class="shop-item"
					@click="goToShop(item)"
				>
					<!-- 编辑模式选择框 -->
					<view v-if="isEditMode" class="item-checkbox" @click.stop="toggleSelect(item.id)">
						<text class="iconfont" :class="selectedItems.includes(item.id) ? 'icon-check-circle-fill' : 'icon-circle'"></text>
					</view>
					
					<image :src="item.logo" class="shop-logo" mode="aspectFill" />
					
					<view class="shop-info">
						<view class="shop-name">{{ item.name }}</view>
						<view class="shop-desc">{{ item.description }}</view>
						<view class="shop-meta">
							<view class="shop-rating">
								<text class="iconfont icon-star-fill"></text>
								<text class="rating-value">{{ item.rating }}</text>
							</view>
							<text class="shop-sales">月销{{ item.sales }}+</text>
						</view>
						<view class="collect-time">{{ formatTime(item.collectTime) }}</view>
					</view>
					
					<view class="shop-actions">
						<view class="action-btn" @click.stop="removeFavorite(item.id)">
							<text class="iconfont icon-heart-fill"></text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view v-if="isEmpty" class="empty-state">
				<image src="/static/images/empty-favorite.png" class="empty-image" />
				<view class="empty-text">暂无收藏内容</view>
				<view class="empty-desc">快去收藏你喜欢的商品和店铺吧</view>
				<view class="empty-btn" @click="goShopping">
					去逛逛
				</view>
			</view>
			
			<!-- 加载更多 -->
			<view v-if="!isEmpty" class="load-more">
				<text v-if="loading">加载中...</text>
				<text v-else-if="noMore">没有更多了</text>
			</view>
		</scroll-view>
		
		<!-- 编辑模式底部操作栏 -->
		<view v-if="isEditMode" class="edit-footer">
			<view class="footer-left">
				<view class="select-all" @click="toggleSelectAll">
					<text class="iconfont" :class="isAllSelected ? 'icon-check-circle-fill' : 'icon-circle'"></text>
					<text class="select-text">全选</text>
				</view>
			</view>
			<view class="footer-right">
				<view class="delete-btn" :class="{ disabled: selectedItems.length === 0 }" @click="batchDelete">
					删除({{ selectedItems.length }})
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/api'

export default {
	data() {
		return {
			tabs: [
				{ name: '商品', count: 0 },
				{ name: '店铺', count: 0 }
			],
			currentTab: 0,
			isEditMode: false,
			selectedItems: [],
			goodsList: [],
			shopList: [],
			loading: false,
			refreshing: false,
			noMore: false,
			page: 1,
			pageSize: 20
		}
	},
	
	computed: {
		// 当前列表
		currentList() {
			return this.currentTab === 0 ? this.goodsList : this.shopList
		},
		
		// 是否为空
		isEmpty() {
			return this.currentList.length === 0 && !this.loading
		},
		
		// 是否全选
		isAllSelected() {
			return this.currentList.length > 0 && this.selectedItems.length === this.currentList.length
		}
	},
	
	onLoad() {
		this.loadFavorites()
	},
	
	onPullDownRefresh() {
		this.onRefresh()
	},
	
	methods: {
		// 返回
		goBack() {
			uni.navigateBack()
		},
		
		// 切换编辑模式
		toggleEditMode() {
			this.isEditMode = !this.isEditMode
			if (!this.isEditMode) {
				this.selectedItems = []
			}
		},
		
		// 切换标签
		changeTab(index) {
			this.currentTab = index
			this.isEditMode = false
			this.selectedItems = []
			this.page = 1
			this.noMore = false
			this.loadFavorites()
		},
		
		// 加载收藏列表
		async loadFavorites(loadMore = false) {
			if (this.loading) return
			
			this.loading = true
			
			try {
				const params = {
					type: this.currentTab === 0 ? 'goods' : 'shop',
					page: loadMore ? this.page : 1,
					pageSize: this.pageSize
				}
				
				// 模拟API调用
				const result = await this.mockGetFavorites(params)
				
				if (loadMore) {
					if (this.currentTab === 0) {
						this.goodsList.push(...result.data.list)
					} else {
						this.shopList.push(...result.data.list)
					}
				} else {
					if (this.currentTab === 0) {
						this.goodsList = result.data.list
					} else {
						this.shopList = result.data.list
					}
				}
				
				// 更新标签计数
				this.tabs[this.currentTab].count = result.data.total
				
				// 判断是否还有更多
				this.noMore = result.data.list.length < this.pageSize
				
				if (loadMore) {
					this.page++
				}
			} catch (error) {
				uni.showToast({
					title: error.message || '加载失败',
					icon: 'none'
				})
			} finally {
				this.loading = false
				this.refreshing = false
				uni.stopPullDownRefresh()
			}
		},
		
		// 模拟获取收藏列表
		mockGetFavorites(params) {
			return new Promise((resolve) => {
				setTimeout(() => {
					const mockData = params.type === 'goods' ? this.getMockGoods() : this.getMockShops()
					resolve({
						data: {
							list: mockData.slice(0, params.pageSize),
							total: mockData.length
						}
					})
				}, 500)
			})
		},
		
		// 获取模拟商品数据
		getMockGoods() {
			return [
				{
					id: 1,
					title: '苹果iPhone 15 Pro Max',
					description: '钛金属设计，A17 Pro芯片',
					image: '/static/images/goods1.jpg',
					price: 9999,
					originalPrice: 10999,
					collectTime: Date.now() - 86400000
				},
				{
					id: 2,
					title: '华为Mate 60 Pro',
					description: '卫星通话，麒麟9000S',
					image: '/static/images/goods2.jpg',
					price: 6999,
					collectTime: Date.now() - 172800000
				}
			]
		},
		
		// 获取模拟店铺数据
		getMockShops() {
			return [
				{
					id: 1,
					name: '苹果官方旗舰店',
					description: '苹果官方授权店铺',
					logo: '/static/images/shop1.jpg',
					rating: 4.9,
					sales: 10000,
					collectTime: Date.now() - 86400000
				},
				{
					id: 2,
					name: '华为官方旗舰店',
					description: '华为官方授权店铺',
					logo: '/static/images/shop2.jpg',
					rating: 4.8,
					sales: 8000,
					collectTime: Date.now() - 172800000
				}
			]
		},
		
		// 刷新
		onRefresh() {
			this.refreshing = true
			this.page = 1
			this.noMore = false
			this.loadFavorites()
		},
		
		// 加载更多
		loadMore() {
			if (!this.noMore && !this.loading) {
				this.loadFavorites(true)
			}
		},
		
		// 切换选择
		toggleSelect(id) {
			const index = this.selectedItems.indexOf(id)
			if (index > -1) {
				this.selectedItems.splice(index, 1)
			} else {
				this.selectedItems.push(id)
			}
		},
		
		// 切换全选
		toggleSelectAll() {
			if (this.isAllSelected) {
				this.selectedItems = []
			} else {
				this.selectedItems = this.currentList.map(item => item.id)
			}
		},
		
		// 批量删除
		batchDelete() {
			if (this.selectedItems.length === 0) {
				return
			}
			
			uni.showModal({
				title: '确认删除',
				content: `确定要删除选中的${this.selectedItems.length}个收藏吗？`,
				success: (res) => {
					if (res.confirm) {
						this.deleteFavorites(this.selectedItems)
					}
				}
			})
		},
		
		// 删除收藏
		async deleteFavorites(ids) {
			try {
				// 模拟删除API
				await new Promise(resolve => setTimeout(resolve, 500))
				
				// 从列表中移除
				if (this.currentTab === 0) {
					this.goodsList = this.goodsList.filter(item => !ids.includes(item.id))
				} else {
					this.shopList = this.shopList.filter(item => !ids.includes(item.id))
				}
				
				// 更新计数
				this.tabs[this.currentTab].count -= ids.length
				
				// 清空选择
				this.selectedItems = []
				
				uni.showToast({
					title: '删除成功',
					icon: 'success'
				})
			} catch (error) {
				uni.showToast({
					title: '删除失败',
					icon: 'none'
				})
			}
		},
		
		// 移除单个收藏
		removeFavorite(id) {
			this.deleteFavorites([id])
		},
		
		// 添加到购物车
		async addToCart(item) {
			try {
				// 模拟添加到购物车API
				await new Promise(resolve => setTimeout(resolve, 300))
				
				uni.showToast({
					title: '已添加到购物车',
					icon: 'success'
				})
			} catch (error) {
				uni.showToast({
					title: '添加失败',
					icon: 'none'
				})
			}
		},
		
		// 跳转到商品详情
		goToGoodsDetail(item) {
			if (this.isEditMode) return
			
			uni.navigateTo({
				url: `/pages/goods/detail?id=${item.id}`
			})
		},
		
		// 跳转到店铺
		goToShop(item) {
			if (this.isEditMode) return
			
			uni.navigateTo({
				url: `/pages/shop/detail?id=${item.id}`
			})
		},
		
		// 去购物
		goShopping() {
			uni.switchTab({
				url: '/pages/index/index'
			})
		},
		
		// 格式化时间
		formatTime(timestamp) {
			const now = Date.now()
			const diff = now - timestamp
			const day = 24 * 60 * 60 * 1000
			
			if (diff < day) {
				return '今天'
			} else if (diff < 2 * day) {
				return '昨天'
			} else if (diff < 7 * day) {
				return `${Math.floor(diff / day)}天前`
			} else {
				const date = new Date(timestamp)
				return `${date.getMonth() + 1}-${date.getDate()}`
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.favorites-container {
	min-height: 100vh;
	background: #f5f5f5;
	padding-top: var(--status-bar-height);
	padding-bottom: env(safe-area-inset-bottom);
}

.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 44px;
	padding: 0 15px;
	background: #fff;
	border-bottom: 1px solid #eee;
	
	.nav-left {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.iconfont {
			font-size: 20px;
			color: #333;
		}
	}
	
	.nav-title {
		font-size: 18px;
		font-weight: 500;
		color: #333;
	}
	
	.nav-right {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.edit-text {
			font-size: 16px;
			color: #007aff;
		}
	}
}

.category-tabs {
	display: flex;
	background: #fff;
	border-bottom: 1px solid #eee;
	
	.tab-item {
		flex: 1;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		color: #666;
		position: relative;
		
		&.active {
			color: #007aff;
			font-weight: 500;
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 30px;
				height: 2px;
				background: #007aff;
				border-radius: 1px;
			}
		}
		
		.tab-count {
			margin-left: 4px;
			font-size: 12px;
		}
	}
}

.favorites-list {
	height: calc(100vh - var(--status-bar-height) - 88px);
	padding: 10px;
}

.goods-list {
	.goods-item {
		display: flex;
		background: #fff;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 10px;
		position: relative;
		
		.item-checkbox {
			position: absolute;
			top: 10px;
			left: 10px;
			z-index: 1;
			
			.iconfont {
				font-size: 20px;
				color: #007aff;
			}
		}
		
		.goods-image {
			width: 80px;
			height: 80px;
			border-radius: 6px;
			margin-right: 12px;
		}
		
		.goods-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			.goods-title {
				font-size: 16px;
				color: #333;
				font-weight: 500;
				line-height: 1.4;
				margin-bottom: 4px;
				@include text-ellipsis(2);
			}
			
			.goods-desc {
				font-size: 12px;
				color: #999;
				margin-bottom: 8px;
				@include text-ellipsis(1);
			}
			
			.goods-price {
				display: flex;
				align-items: baseline;
				margin-bottom: 8px;
				
				.price-symbol {
					font-size: 12px;
					color: #ff4757;
				}
				
				.price-value {
					font-size: 18px;
					color: #ff4757;
					font-weight: 500;
					margin-right: 8px;
				}
				
				.original-price {
					font-size: 12px;
					color: #999;
					text-decoration: line-through;
				}
			}
			
			.goods-meta {
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.collect-time {
					font-size: 12px;
					color: #999;
				}
				
				.goods-actions {
					display: flex;
					gap: 8px;
					
					.action-btn {
						width: 28px;
						height: 28px;
						border-radius: 14px;
						background: #f0f0f0;
						display: flex;
						align-items: center;
						justify-content: center;
						
						.iconfont {
							font-size: 14px;
							color: #666;
						}
						
						&:last-child .iconfont {
							color: #ff4757;
						}
					}
				}
			}
		}
	}
}

.shop-list {
	.shop-item {
		display: flex;
		background: #fff;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 10px;
		position: relative;
		
		.item-checkbox {
			position: absolute;
			top: 10px;
			left: 10px;
			z-index: 1;
			
			.iconfont {
				font-size: 20px;
				color: #007aff;
			}
		}
		
		.shop-logo {
			width: 60px;
			height: 60px;
			border-radius: 30px;
			margin-right: 12px;
		}
		
		.shop-info {
			flex: 1;
			
			.shop-name {
				font-size: 16px;
				color: #333;
				font-weight: 500;
				margin-bottom: 4px;
			}
			
			.shop-desc {
				font-size: 12px;
				color: #999;
				margin-bottom: 8px;
				@include text-ellipsis(1);
			}
			
			.shop-meta {
				display: flex;
				align-items: center;
				gap: 12px;
				margin-bottom: 4px;
				
				.shop-rating {
					display: flex;
					align-items: center;
					gap: 2px;
					
					.iconfont {
						font-size: 12px;
						color: #ffa500;
					}
					
					.rating-value {
						font-size: 12px;
						color: #666;
					}
				}
				
				.shop-sales {
					font-size: 12px;
					color: #666;
				}
			}
			
			.collect-time {
				font-size: 12px;
				color: #999;
			}
		}
		
		.shop-actions {
			display: flex;
			align-items: center;
			
			.action-btn {
				width: 28px;
				height: 28px;
				border-radius: 14px;
				background: #f0f0f0;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.iconfont {
					font-size: 14px;
					color: #ff4757;
				}
			}
		}
	}
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	
	.empty-image {
		width: 120px;
		height: 120px;
		margin-bottom: 20px;
	}
	
	.empty-text {
		font-size: 16px;
		color: #666;
		margin-bottom: 8px;
	}
	
	.empty-desc {
		font-size: 14px;
		color: #999;
		margin-bottom: 30px;
	}
	
	.empty-btn {
		padding: 12px 24px;
		background: #007aff;
		color: #fff;
		border-radius: 20px;
		font-size: 14px;
	}
}

.load-more {
	text-align: center;
	padding: 20px;
	font-size: 14px;
	color: #999;
}

.edit-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
	background: #fff;
	border-top: 1px solid #eee;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 15px;
	padding-bottom: env(safe-area-inset-bottom);
	
	.footer-left {
		.select-all {
			display: flex;
			align-items: center;
			gap: 8px;
			
			.iconfont {
				font-size: 20px;
				color: #007aff;
			}
			
			.select-text {
				font-size: 16px;
				color: #333;
			}
		}
	}
	
	.footer-right {
		.delete-btn {
			padding: 10px 20px;
			background: #ff4757;
			color: #fff;
			border-radius: 20px;
			font-size: 16px;
			
			&.disabled {
				background: #ccc;
				color: #999;
			}
		}
	}
}

// 编辑模式时调整列表底部间距
.favorites-container.edit-mode {
	.favorites-list {
		height: calc(100vh - var(--status-bar-height) - 88px - 60px);
	}
}

// 文本省略混入
@mixin text-ellipsis($lines: 1) {
	@if $lines == 1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	} @else {
		display: -webkit-box;
		-webkit-line-clamp: $lines;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}
</style>